<template>
  <header class="header">
    <div class="main">
      <div class="header-left">
        <span @click="toHome">来客推商城欢迎您</span>
      </div>
      <div class="header-right">
        <span v-if="$store.state.loginStatus">{{ $store.state.UserName }}</span>
        <span @click="loginOrEsc">{{ $store.state.loginStatus ? '【退出】' : '【登录】' }}</span>
        <span @click="[$router.push('/login'), $store.commit('ChangeLoginComponent', 'register')]">【注册】</span>
        <i>|</i>
        <span @click="handleMyOrder">我的订单</span>
        <i>|</i>
        <span @click="handleMyOrder">我的账户</span>
        <a-icon type="down" />
        <i>|</i>
        <a-icon type="shop" />
        <span @click="handleMyOrder">我的店铺</span>
        <i>|</i>
        <a-icon type="message" />
        <span @click="handleMyOrder">消息</span>
        <i>|</i>
        <span class="kefu" @click.stop="OpenChat" @mouseleave="handleAddClose" @mouseenter="handleRemoveClose">
          <span class="iconfont">&#xe600;</span>
          <span>客服服务</span>
        </span>
        <i>|</i>
        <span class="iconfont">&#xe75c;</span>
        <span><a style="color: #b8b8b8" href="http://app.laiketui.net/k5mr">下载APP</a></span>
      </div>
    </div>
  </header>
</template>

<script>
import mixin from '@/App'
export default {
  name: 'headList',
  mixins: [mixin],
  props: {
    msg: String
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    OpenChat () {
      this.$store.commit('setIsOpenChat', true)
    },
    loginOrEsc () {
      if (this.$store.state.UserName !== null) {
        this.$store.commit('setUserName', null)
        localStorage.clear()
        // localStorage.removeItem('username')
        // localStorage.removeItem('token')
        this.$router.push('/login')
        this.$store.commit('ChangeLoginComponent', 'LoginContainer')
      } else {
        this.$router.push('/login')
        this.$store.commit('ChangeLoginComponent', 'LoginContainer')
      }
    },
    handleRemoveClose () {
      document.removeEventListener('click', this.handleAdd)
    },
    handleAddClose () {
      document.addEventListener('click', this.handleAdd)
    },
    handleAdd () {
      this.$store.commit('setIsOpenChat', false)
    },
    handleMyOrder () {
      this.$message.warning('敬请期待！')
    },
    toHome () {
      location.reload()
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  height: 36px;
  width: 100%;
  background-color: rgb(51,51,51);
  line-height: 36px;
  min-width: 600px;
  margin-bottom: 30px;
  .main {
    max-width: 1220px;
    min-width: 660px;
    margin: 0 auto;
    span {
      color: #B8B8B8;
      font-size: 12px;
      cursor: pointer;
    }
    .header-left {
      float: left;
    }
    .header-right {
      float: right;
      .kefu {
        display: inline-block;
        height: 36px;
        width: 65px;
      }
      .iconfont {
        font-size: 16px!important;
      }
      i {
        color: #B8B8B8;
        margin: 0 6px
      }
    }
  }
}
</style>
